<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="OrcasThemes">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
    <title></title>
    <!-- Bootstrap core CSS -->
    <link href="/static/index/css/bootstrap.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link rel="stylesheet" href="/static/index/css/screen.css">
    <link rel="stylesheet" href="/static/index/css/animation.css">
    <!--[if IE 7]>

    <![endif]-->
    <link rel="stylesheet" href="/static/index/css/font-awesome.css">
    <!--[if lt IE 8]>
      <link rel="stylesheet" href="/static/index/css/ie.css" type="text/css" media="screen, projection">
      <![endif]-->
    <link href="/static/index/css/lity.css" rel="stylesheet">
</head>
<body>
<!-- GALLERY VIDEO GRID BOXED -->
<div id="single-video-right-sidebar" class="container-fluid standard-bg">
    <!-- HEADER -->
    <div class="header-top">
        <div><img class="photo_gif" src="/static/index/img/timg.jpg" alt=""/></div>
    </div>
    <!-- MENU -->
    <div class="row home-mega-menu ">
        <div class="col-md-12">
            <nav class="navbar navbar-default">
                <div class="navbar-header">
                    <button class="navbar-toggle" type="button" data-toggle="collapse"
                            data-target=".js-navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="collapse navbar-collapse js-navbar-collapse megabg dropshd ">
                    <ul class="nav navbar-nav">
                        <li><a href="{{ url_for('.index') }}">主页</a></li>
                        <li><a href="{{ url_for('.Comic_consulting') }}">漫画咨询</a></li>
                        <li><a href="{{ url_for('.animation') }}">精美文章</a></li>
                        <li><a href="{{ url_for('.light_novel') }}">短视频</a></li>
                        <li><a href="{{ url_for('.personal_center') }}">个人中心</a></li>
                        <li><a href="#" onclick="javascript:history.back(-1);">返回上一级</a></li>
                    </ul>
                    <div class="search-block">
                        <form>
                            <input type="search" placeholder="Search">
                        </form>
                    </div>
                    <div class="right-box">
                        <div class="user_btns fr">
                            {% if not user %}
                                <a href="{{ url_for('login_blu.login') }}" class="login_btn"><font
                                        color="blue">登录</font> </a> /
                                <a href="javascript:;" class="register_btn"><font color="blue">注册</font></a>
                            {% else %}
                                <a href="{{ url_for('.personal_center') }}" class="login_btn"><font
                                        color="blue">{{ user.nick_name }}</font> </a>
                            {% endif %}

                        </div>
                    </div>
                </div>
                <!-- /.nav-collapse -->
            </nav>
        </div>
    </div>
    <!-- GALLERY VIDEO GRID BOXED -->
    <div class="row">
        <div class="container">
            <div class="row">
                <!-- VIDEO POSTS -->
                <div class="col-lg-12 col-md-12">
                    <!-- GALLERY VIDEO GRID SECTION -->
                    <section id="gallery-video-section">
                        <div class="row">
                            <!-- RELATED VIDEOS -->
                            <div class="col-lg-12 col-md-12 col-sm-12 category-video-grid video-info dropshd">
                                <h2 class="icon"><i class="fa fa-search" aria-hidden="true"></i>BOXED Video Gallery with
                                    Filter</h2>
                                <!-- VIDEO POSTS ROW -->
                                <div class="filter-box">
                                    <button class="btn btn-default filter-button active" data-filter="all">全部</button>
                                    <button class="btn btn-default filter-button" data-filter="tutorial">MV</button>
                                    <button class="btn btn-default filter-button" data-filter="css">cos动漫</button>
                                    <button class="btn btn-default filter-button" data-filter="jquery">官方预告</button>
                                </div>
                                <!-- VIDEO POSTS ROW -->
                                <div class="row clear-auto">
                                    {% for video in videos if video.class_id==2 %}
                                        <div class="col-lg-2 col-md-6 col-sm-4 filter tutorial">
                                            <!-- POST L size -->
                                            <div class="post post-medium">
                                                <div class="thumbr">
                                                    <a class="post-thumb" href="{{ video.url_face }}" data-lity>
                                                        <span class="play-btn-border" title="Play"><i
                                                                class="fa fa-play-circle headline-round"
                                                                aria-hidden="true"></i></span>
                                                        <img class="img-responsive" src="{{ video.img_url }}" alt="#">
                                                        <font>{{ video.name }}</font>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    {% endfor %}
                                    {% for video in videos if video.class_id ==3 %}
                                        <div class="col-lg-2 col-md-6 col-sm-4 filter css">
                                            <!-- POST L size -->
                                            <div class="post post-medium">
                                                <div class="thumbr">
                                                    <a class="post-thumb" href="{{ video.url_face }}" data-lity>
                                                        <span class="play-btn-border" title="Play"><i
                                                                class="fa fa-play-circle headline-round"
                                                                aria-hidden="true"></i></span>
                                                        <img class="img-responsive" src="{{ video.img_url }}" alt="#">
                                                        <font>{{ video.name }}</font>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    {% endfor %}
                                    {% for video in videos if video.class_id == 1 %}
                                        <div class="col-lg-2 col-md-6 col-sm-4 filter jquery">
                                            <!-- POST L size -->
                                            <div class="post post-medium">
                                                <div class="thumbr">
                                                    <a class="post-thumb" href="{{ video.url_face }}" data-lity>
                                                        <span class="play-btn-border" title="Play"><i
                                                                class="fa fa-play-circle headline-round"
                                                                aria-hidden="true"></i></span>
                                                        <img class="img-responsive" src="{{ video.img_url }}" alt="#">
                                                        <font>{{ video.name }}</font>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- BOTTOM BANNER -->
<!-- FOOTER -->
<div id="footer" class="container-fluid footer-background">
    <div class="container">
        <footer>
            <!-- SECTION FOOTER -->
            <div class="row copyright-bottom text-center">
                <div class="col-md-12 text-center">
                    <p>Copyright &copy; 2017.Company name All rights reserved.</p>

                </div>
            </div>
        </footer>
    </div>
</div>
<!-- JAVA SCRIPT -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="/static/index/js/jquery-1.12.1.min.js"></script>
<script src="/static/index/js/bootstrap.min.js"></script>
<script src="/static/index/js/lity.js"></script>
<script>
    $(".nav .dropdown").hover(function () {
        $(this).find(".dropdown-toggle").dropdown("toggle");
    });
    $(document).ready(function () {
        $(".filter-button").click(function () {
            var value = $(this).attr('data-filter');

            if (value == "all") {
                //$('.filter').removeClass('hidden');
                $('.filter').show('1000');
            }
            else {
                //            $('.filter[filter-item="'+value+'"]').removeClass('hidden');
                //            $(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden');
                $(".filter").not('.' + value).hide('3000');
                $('.filter').filter('.' + value).show('3000');

            }
        });

    });
</script>
<!-- MODAL -->
<div id="enquirypopup" class="modal fade in " role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content row">
            <div class="modal-header custom-modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h2 class="icon"><i class="fa fa-television" aria-hidden="true"></i>free access</h2>
            </div>
            <div class="modal-body">
                <form name="info_form" class="form-inline" action="#" method="post">
                    <div class="form-group col-sm-12">
                        <input type="text" class="form-control" name="name" id="name" placeholder="Enter Name">
                    </div>
                    <div class="form-group col-sm-12">
                        <input type="email" class="form-control" name="email" id="email" placeholder="Enter Email">
                    </div>
                    <div class="form-group col-sm-12">
                        <button class="subscribe-btn pull-right" type="submit" title="Subscribe">Subscribe</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
</html>
